<template>
  <div class="resigerForm">
<!--      <span class="title"><span class="cn">免费注册</span>-->
<!--        <span class="en">login</span>-->
<!--      </span>-->
      <el-form  label-width="150px" size="small" :model="form" :rules="rules" ref="form">
        <el-form-item label="公司名称：" required prop="name">
          <el-input v-model="form.name" placeholder="请输入公司名称" @input="getId"></el-input>
        </el-form-item>
<!--        <el-form-item label="公司编码：" required prop="id" >-->
<!--          <el-input v-model="form.id" placeholder="请输入公司编码"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="英文全称：" >
          <el-input v-model="form.enName" placeholder="请输入英文全称"></el-input>
        </el-form-item>
        <el-form-item label="公司简称：" prop="shortName">
          <el-input v-model="form.shortName" placeholder="请输入公司简称"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码：" required prop="taxNo">
          <el-input v-model="form.taxNo" placeholder="请输入统一社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" required prop="primaryContactPerson">
          <el-input v-model="form.primaryContactPerson" placeholder="请输入联系人"></el-input>
        </el-form-item>
<!--        <el-form-item label="公司类型：" required>-->
<!--          <el-checkbox-group v-model="checkList1" @change="change1">-->
<!--            <el-checkbox v-for="(item,index) in sysTenantTypeList" :key="index" :label="item.code">{{ item.name }}</el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="内外贸方式：" required>-->
<!--          <el-checkbox-group v-model="form.tradeList">-->
<!--            <el-checkbox  :label="'N'">内贸</el-checkbox>-->
<!--            <el-checkbox  :label="'W'">外贸</el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否为持箱人：" required>-->
<!--          <el-radio v-model="form.isCstCoper" :label="true">是</el-radio>-->
<!--          <el-radio v-model="form.isCstCoper" :label="false">否</el-radio>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属箱控公司：" v-if="form.isCstCoper">-->
<!--          <el-input v-model="form.cntrOwner" placeholder="请选择所属箱控公司"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属船公司：" v-if="form.isCstCoper">-->
<!--          <el-input v-model="form.shipOwner" placeholder="请选择所属船公司"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属码头：" required>-->
<!--          <el-checkbox-group v-model="checkList2" @change="change2">-->
<!--            <el-checkbox v-for="(item,index) in sysWorkLocationList" :key="index" :label="item.code">{{ item.name }}</el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="结算方式：" required>-->
<!--          <el-radio v-model="form.billType" :label="0">现结</el-radio>-->
<!--          <el-radio v-model="form.billType" :label="1">月结</el-radio>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="对账联系人：" required>-->
<!--          <el-input v-model="form.financePerson" placeholder="请输入对账联系人"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="对账邮箱：" required>-->
<!--          <el-input v-model="form.contactMail" placeholder="请输入对账邮箱"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="银行账号：">-->
<!--          <el-input v-model="form.bankNo" placeholder="请输入银行账号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="开户银行：">-->
<!--          <el-input v-model="form.bank" placeholder="请选择开户银行"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="企业负责人：" required>-->
<!--          <el-input v-model="form.contactPerson" placeholder="请输入企业负责人"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="企业负责人电话：" required>-->
<!--          <el-input v-model="form.contactNumber" placeholder="请输入企业负责人电话"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="国家和地区：">-->
<!--          <el-input v-model="form.region" placeholder="请选择所属国家和地区"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="地址：">-->
<!--          <el-input v-model="form.address" placeholder="请填写地址"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="联系电话：" required prop="tel">
          <el-input v-model="form.tel" placeholder="请填写联系电话"></el-input>
        </el-form-item>

      </el-form>
    <div class="btnBox">
      <div class="btn flex-center" v-loading="loading"  @click="submit">提交</div>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="400px">
      <div class="infoBox">
        <span>账号：{{username}}</span>
        <span>密码：{{password}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import pinyin from "pinyin";
let defaultForm = {
  "address": "",
  "bank": "",
  "bankNo": "",
  "billType": 0,
  "cntrOwner": "",
  "contactMail": "",
  "contactNumber": "",
  "contactPerson": "",
  "enName": "",
  "financePerson": "",
  primaryContactPerson:'',
  "isCstCoper": false,
  "name": "",
  "region": "",
  "shipOwner": "",
  "shortName": "",
  "sysTenantTypeList": [],
  "sysWorkLocationList": [],
  "taxNo": "",
  "tel": "",
  "tradeList": [
  ]
}
export default {
  name: "resigerForm",
  mounted() {
    this.getCustomerTypeList()
    this.getSchedulesTerm()
  },
  methods:{
    getId(){
      let arr= pinyin(this.form.name,{style: "normal", })
      let str = ''
      arr.forEach(x=>{
        str+=x[0][0]
      })
      this.form.id = str.toUpperCase()
    },
    submit(){
      if(this.loading){
        return
      }
      this.$refs.form.validate(v=>{
        if(v){
          this.loading = true
          this.$api.register(this.form).then(res=>{
            this.loading = false
            this.$router.push({name:'successPage',query:{title:'注册信息已提交，请等待审核',name:'home',nameTitle:'回到首页'}})
          }).catch(err=>{
            this.loading = false
          })
        }
      })

    },

    change1(v){
      this.form.sysTenantTypeList = v.map(x=>{
        return {
          tenantType:x,
        }
      })
    },
    change2(v){
      this.form.sysWorkLocationList = v.map(x=>{
        return {
          code:x,
          name:this.sysWorkLocationListMap[x]
        }
      })
    },
    getSchedulesTerm(){
      this.$api.getSchedulesTerm().then(res=>{
        let obj = {}
        this.sysWorkLocationList = res.data.data
        res.data.data.forEach(x=>{
          obj[x.termCode] = x.cnName
        })
        this.sysWorkLocationListMap = obj
      })
    },
    getCustomerTypeList(){
      this.$api.getCustomerTypeList().then(res=>{
        this.sysTenantTypeList = res.data
        let obj = {}
        res.data.forEach(x=>{
          obj[x.code] = x.name
        })
        this.sysTenantTypeListMap = obj
      })
    },
  },
  data(){
    return {
      rules:{
        name: [{ required: true, message: '必填' }],
        shortName: [{ required: true, message: '必填',  }],
        taxNo: [{ required: true, message: '必填',  }],
        primaryContactPerson: [{ required: true, message: '必填',}],
        tel: [{ required: true, message: '必填',  }],
      },
      dialogVisible:false,
      loading:false,
      username:'',
      password:"",
      checkList1:[],
      checkList2:[],
      sysWorkLocationList:[
      ],
      sysWorkLocationListMap:{
      },
      sysTenantTypeList:[],
      sysTenantTypeListMap:{},
      form:{
        ...defaultForm
      }
    }
  },
}
</script>

<style scoped lang="less">
/deep/.el-radio__input.is-checked .el-radio__inner{
  border-color: #0F47B8;
  background: #0F47B8;
}
/deep/.el-radio__input.is-checked+.el-radio__label{
  color:#0F47B8;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #0F47B8;
  border-color: #0F47B8;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label{
  color:#0F47B8;
}
.infoBox{
  display: flex;
  flex-direction: column;
}
.resigerForm{
  width: 1050px;
  //height: 676px;
  padding: 40px 75px;
  background: #FFFFFF;
  border-radius: 16px;
  .title{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    .cn{
      font-size: 24px;
      color: #0F47B8;
      display: inline-block;
      margin-right: 10px;
    }
    .en{
      font-size: 18px;
      color: #999999;
      font-style: italic;
    }
  }

  .btnBox{
    width: 100%;
    display: flex;
    cursor: pointer;
    justify-content: center;
    .btn{
      width: 120px;
      height: 40px;
      background: #0F47B8;
      border-radius: 4px;
      color: white;
      margin-top: 20px;
    }
  }
}
</style>